<!-- 商品列表表格组件 -->
<template>
  <div>
    <div class="body">
      <Search />
      <div class="goods-list-content">
        <div class="header">商品列表--{{status}}</div>
        <div class="btn-box">
          <el-button size="small" type="primary">添加商品</el-button>
        </div>
        <el-table :data="goodsList" style="width: 100%">
          <el-table-column label="#" width="80" type="index"></el-table-column>
          <el-table-column label="ID" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品图片" width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.cate_name }}</span>
            </template>
          </el-table-column>
          <el-table-column label="商品名称" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.pic?scope.row.pic:'暂无图片' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="虚拟销量" width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.pic }}</span>
            </template>
          </el-table-column>
          <el-table-column label="库存" width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.sort }}</span>
            </template>
          </el-table-column>
          <el-table-column label="排序" width="120">
            <template slot-scope="scope">
              <span>{{ scope.row.sort }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="goodsEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="goodsDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import Search from "./search";
export default {
  props: ['status'],
  components: {
    Search
  },
  data () {
    return {
      goodsList: []
    }
  },
  methods: {
    goodsEdit() {},
    goodsDelete() {}
  }
};
</script>

<style scoped lang="less">
.goods-list-content {
  background: #fff;
  border-radius: 2px;
  padding: 10px;
  .btn-box {
    padding: 5px;
    padding-bottom: 0;
  }
  .header {
    border-bottom: 1px solid #f6f6f6;
  }
}
</style>
